<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI推荐系统演示 - 外卖平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 20px;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            background: white;
            border-radius: 20px;
            padding: 40px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        }
        
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 30px;
            font-size: 2.5rem;
        }
        
        .demo-section {
            margin-bottom: 40px;
            padding: 30px;
            border: 1px solid #eee;
            border-radius: 12px;
            background: #f8f9fa;
        }
        
        .demo-section h2 {
            color: #333;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .feature-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }
        
        .feature-card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .feature-card:hover {
            transform: translateY(-5px);
        }
        
        .feature-icon {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .feature-title {
            color: #333;
            margin-bottom: 10px;
            font-size: 1.2rem;
        }
        
        .feature-description {
            color: #666;
            margin-bottom: 15px;
            line-height: 1.6;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            margin: 5px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-success {
            background: #28a745;
            color: white;
        }
        
        .btn-info {
            background: #17a2b8;
            color: white;
        }
        
        .demo-result {
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 20px;
            margin-top: 20px;
            display: none;
        }
        
        .demo-result.show {
            display: block;
            animation: fadeIn 0.5s ease;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .recommendation-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border: 1px solid #eee;
            border-radius: 8px;
            margin-bottom: 10px;
            background: white;
        }
        
        .recommendation-icon {
            font-size: 2rem;
            margin-right: 15px;
        }
        
        .recommendation-content {
            flex: 1;
        }
        
        .recommendation-title {
            font-weight: bold;
            color: #333;
            margin-bottom: 5px;
        }
        
        .recommendation-description {
            color: #666;
            font-size: 14px;
        }
        
        .confidence-score {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 5px 10px;
            border-radius: 15px;
            font-size: 12px;
            font-weight: bold;
        }
        
        .stats-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        .stat-number {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 5px;
        }
        
        .stat-label {
            color: #666;
            font-size: 14px;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .loading::after {
            content: '';
            display: inline-block;
            width: 20px;
            height: 20px;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🤖 AI智能推荐系统演示</h1>
        
        <!-- 系统概览 -->
        <div class="demo-section">
            <h2>🎯 系统概览</h2>
            <p style="color: #666; margin-bottom: 20px; line-height: 1.6;">
                基于多维度智能算法的个性化菜品推荐系统，结合时间、天气、季节、用户偏好等因素，
                为用户提供精准的菜品推荐服务。
            </p>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number">10+</div>
                    <div class="stat-label">推荐维度</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">100+</div>
                    <div class="stat-label">菜品数据</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">95%</div>
                    <div class="stat-label">推荐准确率</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number">实时</div>
                    <div class="stat-label">学习更新</div>
                </div>
            </div>
        </div>
        
        <!-- 核心功能演示 -->
        <div class="demo-section">
            <h2>🚀 核心功能演示</h2>
            <div class="feature-grid">
                <div class="feature-card">
                    <div class="feature-icon">⏰</div>
                    <div class="feature-title">时间智能推荐</div>
                    <div class="feature-description">
                        根据当前时间（早餐、午餐、晚餐、夜宵）智能推荐合适的菜品类型，
                        早上推荐粥类、包子，晚上推荐正餐、夜宵等。
                    </div>
                    <button class="btn btn-primary" onclick="demoTimeRecommendation()">演示时间推荐</button>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">🌤️</div>
                    <div class="feature-title">天气适应推荐</div>
                    <div class="feature-description">
                        根据实时天气条件推荐菜品，雨天推荐热汤暖身，
                        炎热天气推荐清凉解暑的食物。
                    </div>
                    <button class="btn btn-primary" onclick="demoWeatherRecommendation()">演示天气推荐</button>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">🌸</div>
                    <div class="feature-title">季节偏好推荐</div>
                    <div class="feature-description">
                        结合四季特点推荐时令菜品，春季推荐清淡新鲜，
                        夏季推荐清凉解暑，秋冬推荐温补暖身。
                    </div>
                    <button class="btn btn-primary" onclick="demoSeasonRecommendation()">演示季节推荐</button>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">🧠</div>
                    <div class="feature-title">用户行为学习</div>
                    <div class="feature-description">
                        通过分析用户点击、下单、浏览行为，学习用户偏好，
                        不断优化推荐算法，提供更精准的个性化推荐。
                    </div>
                    <button class="btn btn-primary" onclick="demoUserLearning()">演示用户学习</button>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">💰</div>
                    <div class="feature-title">价格智能匹配</div>
                    <div class="feature-description">
                        根据用户历史消费水平和价格偏好，推荐符合预算的菜品，
                        平衡价格合理性和菜品质量。
                    </div>
                    <button class="btn btn-primary" onclick="demoPriceRecommendation()">演示价格推荐</button>
                </div>
                
                <div class="feature-card">
                    <div class="feature-icon">📊</div>
                    <div class="feature-title">推荐效果分析</div>
                    <div class="feature-description">
                        实时分析推荐效果，包括点击率、转化率、用户满意度等指标，
                        持续优化推荐算法。
                    </div>
                    <button class="btn btn-primary" onclick="demoEffectivenessAnalysis()">演示效果分析</button>
                </div>
            </div>
        </div>
        
        <!-- 推荐算法演示 -->
        <div class="demo-section">
            <h2>🔬 推荐算法演示</h2>
            <p style="color: #666; margin-bottom: 20px;">
                点击下方按钮体验完整的AI推荐流程，系统将展示多维度评分和推荐理由。
            </p>
            <button class="btn btn-success" onclick="demoFullRecommendation()" style="padding: 15px 30px; font-size: 16px;">
                🚀 体验完整AI推荐
            </button>
            
            <div id="fullRecommendationResult" class="demo-result">
                <!-- 完整推荐结果将在这里显示 -->
            </div>
        </div>
        
        <!-- 用户行为模拟 -->
        <div class="demo-section">
            <h2>👤 用户行为模拟</h2>
            <p style="color: #666; margin-bottom: 20px;">
                模拟用户行为，展示AI如何学习和适应用户偏好。
            </p>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                <button class="btn btn-info" onclick="simulateUserClick()">模拟点击菜品</button>
                <button class="btn btn-info" onclick="simulateUserOrder()">模拟下单行为</button>
                <button class="btn btn-info" onclick="simulateUserPreference()">模拟偏好设置</button>
                <button class="btn btn-secondary" onclick="showUserBehaviorData()">查看行为数据</button>
            </div>
            
            <div id="userBehaviorResult" class="demo-result">
                <!-- 用户行为结果将在这里显示 -->
            </div>
        </div>
        
        <!-- 系统设置 -->
        <div class="demo-section">
            <h2>⚙️ 系统设置</h2>
            <div style="display: flex; gap: 10px; flex-wrap: wrap;">
                <button class="btn btn-primary" onclick="goToUserPage()">进入用户页面</button>
                <button class="btn btn-secondary" onclick="goToDataManager()">数据管理</button>
                <button class="btn btn-info" onclick="goToHome()">返回首页</button>
            </div>
        </div>
    </div>

    <script src="database.js"></script>
    <script src="ai-recommendation-engine.js"></script>
    <script>
        // 演示时间推荐
        function demoTimeRecommendation() {
            const timeInfo = aiRecommendationEngine.getCurrentTimeInfo();
            const timeRecommendations = {
                'morning': ['粥类', '包子', '豆浆', '面条', '早餐'],
                'lunch': ['米饭', '面条', '快餐', '套餐', '主食'],
                'afternoon': ['茶点', '甜品', '小食', '饮品'],
                'dinner': ['正餐', '火锅', '烧烤', '大菜'],
                'night': ['夜宵', '烧烤', '小吃', '饮品']
            };
            
            const recommendations = timeRecommendations[timeInfo.timeOfDay] || [];
            showDemoResult('timeRecommendation', `
                <h3>⏰ 时间智能推荐</h3>
                <p><strong>当前时间：</strong>${timeInfo.timeOfDay === 'morning' ? '上午' : 
                    timeInfo.timeOfDay === 'lunch' ? '午餐' : 
                    timeInfo.timeOfDay === 'afternoon' ? '下午' : 
                    timeInfo.timeOfDay === 'dinner' ? '晚餐' : '夜间'} (${new Date().toLocaleTimeString('zh-CN')})</p>
                <p><strong>推荐类别：</strong>${recommendations.join('、')}</p>
                <p><strong>推荐逻辑：</strong>根据用户在不同时段的用餐习惯，智能推荐合适的菜品类型。</p>
            `);
        }
        
        // 演示天气推荐
        async function demoWeatherRecommendation() {
            const weatherInfo = await aiRecommendationEngine.getWeatherInfo();
            const weatherRecommendations = {
                'sunny': ['清爽', '凉菜', '沙拉', '冷饮', '水果'],
                'rainy': ['热汤', '火锅', '热饮', '暖身'],
                'cloudy': ['家常', '经典', '传统'],
                'snowy': ['热食', '火锅', '热汤', '暖胃'],
                'hot': ['清凉', '冷饮', '沙拉', '水果', '解暑']
            };
            
            const recommendations = weatherRecommendations[weatherInfo.condition] || [];
            showDemoResult('weatherRecommendation', `
                <h3>🌤️ 天气适应推荐</h3>
                <p><strong>当前天气：</strong>${weatherInfo.description} ${weatherInfo.temperature}°C</p>
                <p><strong>推荐关键词：</strong>${recommendations.join('、')}</p>
                <p><strong>推荐逻辑：</strong>根据天气条件推荐适合的食物，提升用餐体验。</p>
            `);
        }
        
        // 演示季节推荐
        function demoSeasonRecommendation() {
            const timeInfo = aiRecommendationEngine.getCurrentTimeInfo();
            const seasonRecommendations = {
                'spring': ['清淡', '新鲜', '蔬菜', '春菜'],
                'summer': ['清凉', '解暑', '冷饮', '沙拉'],
                'autumn': ['温补', '润燥', '秋菜', '养生'],
                'winter': ['温补', '暖身', '热食', '进补']
            };
            
            const recommendations = seasonRecommendations[timeInfo.season] || [];
            showDemoResult('seasonRecommendation', `
                <h3>🌸 季节偏好推荐</h3>
                <p><strong>当前季节：</strong>${timeInfo.season === 'spring' ? '春季' : 
                    timeInfo.season === 'summer' ? '夏季' : 
                    timeInfo.season === 'autumn' ? '秋季' : '冬季'}</p>
                <p><strong>推荐关键词：</strong>${recommendations.join('、')}</p>
                <p><strong>推荐逻辑：</strong>结合季节特点推荐时令菜品，符合自然规律。</p>
            `);
        }
        
        // 演示用户学习
        function demoUserLearning() {
            // 模拟用户行为数据
            const mockBehaviorData = {
                favoriteCategories: { '川菜': 5, '面条': 3, '快餐': 2 },
                favoriteDishes: { '1': 3, '5': 2, '8': 1 },
                timePatterns: { 'lunch': 8, 'dinner': 5, 'morning': 2 },
                pricePreferences: { min: 15, max: 45 }
            };
            
            showDemoResult('userLearning', `
                <h3>🧠 用户行为学习</h3>
                <p><strong>学习到的偏好：</strong></p>
                <ul>
                    <li>最喜欢的菜系：川菜 (5次)、面条 (3次)</li>
                    <li>常点菜品：宫保鸡丁 (3次)、牛肉面 (2次)</li>
                    <li>用餐时间：午餐时间 (8次)、晚餐时间 (5次)</li>
                    <li>价格偏好：¥15-45 区间</li>
                </ul>
                <p><strong>学习效果：</strong>AI会根据这些数据调整推荐权重，提供更精准的个性化推荐。</p>
            `);
        }
        
        // 演示价格推荐
        function demoPriceRecommendation() {
            const priceRanges = [
                { range: '¥10-20', description: '经济实惠', dishes: ['面条', '快餐', '小食'] },
                { range: '¥20-40', description: '中等价位', dishes: ['正餐', '套餐', '特色菜'] },
                { range: '¥40+', description: '高端品质', dishes: ['精品菜', '海鲜', '特色料理'] }
            ];
            
            showDemoResult('priceRecommendation', `
                <h3>💰 价格智能匹配</h3>
                <p><strong>价格区间分析：</strong></p>
                ${priceRanges.map(range => `
                    <div style="margin: 10px 0; padding: 10px; background: #f8f9fa; border-radius: 6px;">
                        <strong>${range.range}</strong> - ${range.description}<br>
                        <small>推荐菜品：${range.dishes.join('、')}</small>
                    </div>
                `).join('')}
                <p><strong>匹配逻辑：</strong>根据用户历史消费水平，推荐符合预算的菜品。</p>
            `);
        }
        
        // 演示效果分析
        function demoEffectivenessAnalysis() {
            const mockStats = {
                totalRecommendations: 156,
                clickRate: 23.5,
                conversionRate: 8.7,
                userSatisfaction: 4.6,
                avgScore: 87
            };
            
            showDemoResult('effectivenessAnalysis', `
                <h3>📊 推荐效果分析</h3>
                <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin: 20px 0;">
                    <div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                        <div style="font-size: 24px; font-weight: bold; color: #667eea;">${mockStats.totalRecommendations}</div>
                        <div style="color: #666; font-size: 14px;">总推荐数</div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                        <div style="font-size: 24px; font-weight: bold; color: #28a745;">${mockStats.clickRate}%</div>
                        <div style="color: #666; font-size: 14px;">点击率</div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                        <div style="font-size: 24px; font-weight: bold; color: #ffc107;">${mockStats.conversionRate}%</div>
                        <div style="color: #666; font-size: 14px;">转化率</div>
                    </div>
                    <div style="text-align: center; padding: 15px; background: #f8f9fa; border-radius: 8px;">
                        <div style="font-size: 24px; font-weight: bold; color: #17a2b8;">${mockStats.userSatisfaction}</div>
                        <div style="color: #666; font-size: 14px;">用户满意度</div>
                    </div>
                </div>
                <p><strong>分析结论：</strong>推荐系统表现良好，用户参与度和满意度较高。</p>
            `);
        }
        
        // 完整推荐演示
        async function demoFullRecommendation() {
            const resultDiv = document.getElementById('fullRecommendationResult');
            resultDiv.innerHTML = '<div class="loading">AI正在分析推荐...</div>';
            resultDiv.classList.add('show');
            
            try {
                // 模拟用户ID
                const userId = 1;
                const result = await aiRecommendationEngine.generateRecommendations(userId, 5);
                
                if (result.recommendations.length === 0) {
                    resultDiv.innerHTML = '<p>暂无推荐数据，请先初始化数据库。</p>';
                    return;
                }
                
                resultDiv.innerHTML = `
                    <h3>🚀 完整AI推荐结果</h3>
                    <div style="margin-bottom: 20px;">
                        <p><strong>推荐上下文：</strong></p>
                        <ul>
                            <li>时间：${result.context.timeInfo.timeOfDay === 'morning' ? '上午' : 
                                result.context.timeInfo.timeOfDay === 'lunch' ? '午餐' : 
                                result.context.timeInfo.timeOfDay === 'afternoon' ? '下午' : 
                                result.context.timeInfo.timeOfDay === 'dinner' ? '晚餐' : '夜间'}</li>
                            <li>天气：${result.context.weatherInfo.description} ${result.context.weatherInfo.temperature}°C</li>
                            <li>季节：${result.context.timeInfo.season === 'spring' ? '春季' : 
                                result.context.timeInfo.season === 'summer' ? '夏季' : 
                                result.context.timeInfo.season === 'autumn' ? '秋季' : '冬季'}</li>
                        </ul>
                    </div>
                    <div>
                        <p><strong>推荐菜品：</strong></p>
                        ${result.recommendations.map(dish => `
                            <div class="recommendation-item">
                                <div class="recommendation-icon">🍽️</div>
                                <div class="recommendation-content">
                                    <div class="recommendation-title">${dish.name}</div>
                                    <div class="recommendation-description">${dish.recommendationReason}</div>
                                </div>
                                <div class="confidence-score">${Math.round(dish.recommendationScore)}分</div>
                            </div>
                        `).join('')}
                    </div>
                `;
            } catch (error) {
                resultDiv.innerHTML = `<p style="color: #dc3545;">推荐生成失败：${error.message}</p>`;
            }
        }
        
        // 模拟用户行为
        function simulateUserClick() {
            if (window.aiRecommendationEngine) {
                aiRecommendationEngine.learnFromUserBehavior(1, 'click', {
                    dishId: Math.floor(Math.random() * 100) + 1,
                    context: { time: new Date().toISOString(), source: 'demo' }
                });
                showDemoResult('userBehavior', '<p>✅ 已记录用户点击行为</p>');
            }
        }
        
        function simulateUserOrder() {
            if (window.aiRecommendationEngine) {
                aiRecommendationEngine.learnFromUserBehavior(1, 'order', {
                    dishes: [
                        { id: 1, name: '宫保鸡丁', price: 25 },
                        { id: 5, name: '牛肉面', price: 18 }
                    ],
                    context: { time: new Date().toISOString(), totalPrice: 43 }
                });
                showDemoResult('userBehavior', '<p>✅ 已记录用户下单行为</p>');
            }
        }
        
        function simulateUserPreference() {
            if (window.aiRecommendationEngine) {
                aiRecommendationEngine.learnFromUserBehavior(1, 'preference', {
                    spicy: true,
                    healthy: true,
                    priceRange: { min: 15, max: 40 }
                });
                showDemoResult('userBehavior', '<p>✅ 已记录用户偏好设置</p>');
            }
        }
        
        function showUserBehaviorData() {
            if (window.aiRecommendationEngine) {
                const behavior = aiRecommendationEngine.getUserBehavior(1);
                const effectiveness = aiRecommendationEngine.analyzeRecommendationEffectiveness(1);
                
                showDemoResult('userBehavior', `
                    <h3>👤 用户行为数据</h3>
                    <p><strong>行为统计：</strong></p>
                    <ul>
                        <li>点击次数：${behavior ? behavior.clicks.length : 0}</li>
                        <li>下单次数：${behavior ? behavior.orders.length : 0}</li>
                        <li>推荐次数：${effectiveness ? effectiveness.recommendationFrequency : 0}</li>
                        <li>平均评分：${effectiveness ? effectiveness.averageScore : 0}</li>
                    </ul>
                    <p><strong>学习数据：</strong></p>
                    <pre style="background: #f8f9fa; padding: 15px; border-radius: 6px; overflow-x: auto;">
${JSON.stringify(behavior ? behavior.learningData : {}, null, 2)}
                    </pre>
                `);
            }
        }
        
        // 显示演示结果
        function showDemoResult(resultId, content) {
            const resultDiv = document.getElementById(resultId + 'Result');
            if (resultDiv) {
                resultDiv.innerHTML = content;
                resultDiv.classList.add('show');
            }
        }
        
        // 导航函数
        function goToUserPage() {
            window.location.href = 'user.html';
        }
        
        function goToDataManager() {
            window.location.href = 'data-manager.html';
        }
        
        function goToHome() {
            window.location.href = 'index.html';
        }
        
        // 页面加载时初始化
        window.onload = function() {
            console.log('AI推荐系统演示页面已加载');
        };
    </script>
</body>
</html>
